<template xmlns="http://www.w3.org/1999/html">
    <div>
        <van-row>
            <van-col span="10">
                <van-search v-model="valueCity" placeholder="请选择城市" readonly @focus="showCityPopup"/>
            </van-col>
            <van-col span="10">
                <van-search v-model="valueWorkType" placeholder="请选择工种" readonly @click="showWorkTypePopup"/>
            </van-col>
            <van-col span="4">
                <van-button type="primary" size="large" @click="searchJob">搜索</van-button>
            </van-col>
        </van-row>
        <div class="content" id="jobList" @scroll="initScorell($event)">
            <van-panel v-for="item in list" v-bind:key="item._id" :title="item.name"
                       :desc="'工作地点：'+(item.province?item.province:'')+'-'+(item.city?item.city:'')+'-'+(item.area?item.area:'')+'  联系人：'+item.contactsMan"
                       :status="item.sex">
                <div style="padding:0em 1em;">
                    <van-tag mark type="primary">工种：</van-tag>
                    <van-tag v-for="(t,index) in item.workType" :type="radomTag()" style="margin-left:1em;"> {{t}}
                    </van-tag>
                    <br/>
                </div>
                <div slot="footer" style="text-align:right;">
                    <van-button size="small" type="danger" @click="showDetail(item)">查看详情</van-button>
                    &nbsp;
                    <van-button size="small" type="primary" @click="phone(item.contactsPhone)">
                        <van-icon name="phone"/>
                        电话联系
                    </van-button>
                </div>
            </van-panel>
        </div>
        <van-popup v-model="show">
            <van-panel :title="name" :desc="'联系人:'+contactsMan">
                <van-cell>工作地点：{{position}}</van-cell>
                <van-cell>工 种：</van-cell>
                <van-cell icon="contact" color="blue" v-for="(item,index) in workType" :title="`${item}`" :key="item"
                          :value="`${workCount[index]}`?`${workCount[index]}人`:'若干'"></van-cell>
                <p>{{description}}</p>
                <div slot="footer" style="text-align:right;">
                    <van-button size="small" type="primary" @click="phone(contactsPhone)">
                        <van-icon name="phone"/>
                        电话联系
                    </van-button>
                </div>
            </van-panel>
        </van-popup>
        <van-popup v-model="showCity" position="bottom" :close-on-click-overlay="false">
            <van-picker ref="provinces" :show-toolbar="true" @confirm="confirm" @cancel="cancelCity"
                        :columns="provinces"
                        @change="onProvinceChange"/>
        </van-popup>
        <van-popup v-model="showWorkType" position="bottom" :close-on-click-overlay="false">
            <van-picker ref="workType" :show-toolbar="true" @confirm="confirmWorkType" @cancel="cancelWorkType"
                        :columns="workType"/>
        </van-popup>
    </div>
</template>
<script>
    import http from '../common/http';
    import {Button, Waterfall, List, Cell, Panel, Icon, Tag, Popup, CellGroup, Row, Col, Search, Picker} from 'vant';

    export default {
        components: {
            [Button.name]: Button,
            [Icon.name]: Icon,
            [List.name]: List,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Panel.name]: Panel,
            [Tag.name]: Tag,
            [Popup.name]: Popup,
            [Row.name]: Row,
            [Col.name]: Col,
            [Search.name]: Search,
            [Picker.name]: Picker,

        },
        data() {
            return {
                list: [],
                disabled: false,
                page: 1,
                maxPage: 1,
                rows: 10,
                show: false,
                name: '',
                position: '',
                workType: [],
                workCount: [],
                contactsMan: '',
                contactsPhone: '',
                description: '',
                defaultList: [],
                valueProvince: '',
                valueCity: '',
                valueWorkType: '',
                showCity: false,
                showWorkType: false,
                isShowCityFirst: true,
                provincesData: null,
                provinces: [
                    {
                        values: [],
                        className: 'column1'
                    },
                    {
                        values: [],
                        className: 'column2',
                        defaultIndex: 1
                    }
                ],
                searchType: 1,
            };

        },
        created() {
            this.$parent.title = '找工作';
            this.$parent.active = 0;
            this.$parent.isTabbar = true;
            this.loadMore();
            this.loadConfigData();
        },
        directives: {
            WaterfallLower: Waterfall('lower')
        },
        computed: {},
        methods: {
            radomTag() {
                let arr = ['primary', 'danger', 'success'];
                let rad = Math.floor(Math.random() * 3);
                return arr[rad];
            },
            phone(p) {
                window.location.href = `tel:${p}`;
            },
            loadMore() {
                console.log(this.maxPage < this.page);
                if (this.maxPage < this.page) return;
                this.disabled = true;
                let _id = localStorage.getItem('_id');
                let token = localStorage.getItem('token');
                let findObj = {
                    _id: _id ? _id : http._id,
                    token: token ? token : http.token,
                    name: '',
                    workType: this.valueWorkType,
                    province: this.valueProvince,
                    city: this.valueCity,
                    area: '',
                    page: this.page,
                    rows: this.rows,
                };
                http.postJsonData(`/public/job/list`, findObj, (data) => {
                    console.log(data);
                    this.maxPage = Math.floor(data.totalCnt / this.rows);
                    this.page++;
                    if (this.searchType == 1) {
                        for (let i = 0; i < data.jobs.length; i++) {
                            this.list.push(data.jobs[i]);
                        }
                    } else if (this.searchType == 2) {
                        this.searchType = 1;
                        this.list = data.jobs;
                    }
                    this.disabled = false;
                });
            },
            loadConfigData() {
                let _id = localStorage.getItem('_id');
                let token = localStorage.getItem('token');
                let obj = {
                    _id: _id ? _id : http._id,
                    token: token ? token : http.token,
                };
                http.getUserJsonData(`/user/job/get`, obj, (data) => {
                    console.log('走了这里', data)
                    this.provincesData = data.provinces;
                    this.workType = data.workType;
                });
            },
            //显示详情
            showDetail(item) {
                this.show = true;
                this.name = item.name;
                this.position = (item.province ? item.province : '') + '-' + (item.city ? item.city : '') + '-' + (item.area ? item.area : '');
                this.workType = item.workType;
                this.workCount = item.workCount;
                this.contactsMan = item.contactsMan;
                this.contactsPhone = item.contactsPhone;
                this.description = item.description;
            },
            //滚动条
            initScorell(event) {
                let scrollTop = document.getElementById('jobList').scrollTop;
                let scrollHeight = document.getElementById('jobList').scrollHeight;
                let offsetHeight = document.getElementById('jobList').offsetHeight;
                if (scrollTop + offsetHeight == scrollHeight) {
                    this.loadMore();
                }
            },
            //展开显示可供选择的城市
            showCityPopup() {
                this.showCity = true;
                // if (!this.isShowCityFirst) return;
                // this.isShowCityFirst = false;
                setTimeout(() => {
                    this.$refs.provinces.setColumnValues(0, Object.keys(this.provincesData));
                    this.$refs.provinces.setColumnValue(0, '湖南');
                    this.$refs.provinces.setColumnValues(1, Object.keys(this.provincesData['湖南']));
                    this.$refs.provinces.setColumnValue(1, '湘潭');
                }, 100)
            },
            showWorkTypePopup() {
                this.showWorkType = true;
                if (!this.isShowWorkTypeFirst) return;
                this.isShowWorkTypeFirst = false;
                setTimeout(() => {
                    this.$refs.workType.setColumnValues(0, Object.keys(this.workType));
                    this.$refs.workType.setColumnValue(0, this.workType[2]);
                }, 100)
            },
            //选择城市点击确认
            confirm(data) {
                this.showCity = false;
                this.valueCity = data[1];
                this.valueProvince = data[0];
            },

            //选择城市点击取消
            //点击取消
            cancelCity() {
                this.showCity = false;
                this.valueCity = '';
                this.valueProvince = '';
            },
            cancelWorkType() {
                this.showWorkType = false;
                this.valueWorkType = '';
            },

            //点击确认保存选择的工种
            confirmWorkType(data) {
                this.showWorkType = false;
                this.valueWorkType = data;
            },

            onProvinceChange(picker, values, index) {
                if (index == 0) {
                    picker.setColumnValues(1, Object.keys(this.provincesData[values[0]]));
                    // picker.setColumnValues(2, this.provincesData[values[0]][picker.getColumnValue(1)]);
                }
                // if (index == 1) {
                //     picker.setColumnValues(2, this.provincesData[values[0]][values[1]]);
                // }
            },
            //点击搜索
            searchJob() {
                this.searchType = 2;
                this.page = 1;
                this.maxPage = 1;
                this.loadMore();
            },
        },
    }
</script>
<style>
    .van-popup {
        width: 100%;
        max-Height: 60%;
        padding: 20px;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        height: 81%;
        position: absolute;
        overflow: auto;
    }
</style>
